<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%-- <%@ taglib prefix="c"uri="http://java.sun.com/jstl/core" %> --%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/common/common.jsp" %>
<html>
<head>
    <meta />
    <title>已上架商品列表</title>
    <link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/dist/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/plugins/datatables/css/matrix-style.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/dist/css/AdminLTE.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/plugins/datatables/css/dataTables.bootstrap.css" rel="stylesheet" type="text/css"/>
    <style>
        button.searching{
            background-color:#666
        }
    </style>
</head>
<body>
<div class="widget-box">
	<div class="widget-title">
	   <h5>请输入查询条件</h5>
	</div>
	<div class="widget-content nopadding">
		<table style="line-height:45px;font-size:12px;">
			<tr>
				<td>&nbsp;&nbsp;&nbsp;添加来源：</td>
				<td>
				<select  class="form-control" id="productForm"  style="width:200px;">
					<option value="" selected="selected">请选择</option>
					<option value="1" >平台</option>
					<option value="2">代理商</option>
				</select>
				</td>
				<td>&nbsp;&nbsp;&nbsp;供应商：</td>
				<td id="supplierType">
				
				</td>
				<td>&nbsp;&nbsp;&nbsp;商品分类：</td>
				<td id="selectType">
				</td>
				<td id="selectTypeTwo">
				</td>	
				<td id="selectTypeThree">
				</td>	
			</tr>
			<tr>
				<td>&nbsp;&nbsp;&nbsp;商品名称：</td>
				<td><input type="text" class="form-control" name="productName" id="productName"  style="width:200px;" placeholder="商品名称" ></td>
				<td></td>
				<td>
				</td>
				<td>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-success" href="javascript:;" onclick="query();">查 询</a>
				</td>
				<td>
<%-- 					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" href="${ctx}/api/product/toAddProductPage">新增</a> --%>
				</td>		
				<td>
<%-- 					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary" href="${ctx}/api/product/toAddProductPage">批量删除</a> --%>
				</td>
				<td>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				</td>			
			</tr>
		</table>
	</div>
</div>
 <div class="row">
		 <div class="col-xs-12">
		 	<div class="box">
		 		<div class="box-header">
	                 <h3 class="box-title">商品列表</h3>
	             </div>
	             <!-- 列表 -->
	             <div class="box-body table-responsive">
	             	<table id="productSaleNoSaleList" class="table table-bordered table-hover">
	             	</table>
	             </div>
		 	</div>
		 </div>
	</div>
<script src="${ctx}/static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
<!-- datatable -->
<script src="${ctx}/static/plugins/datatables/jquery.dataTables.js" type="text/javascript"></script>
<script src="${ctx}/static/plugins/datatables/dataTables.bootstrap.js" type="text/javascript"></script>
<script>
   var tb;
   var classifyLevel = 1;
   $(function () {
		//列表初始化
		tb = $('#productSaleNoSaleList').dataTable({
				"bServerSide": true,
				"destroy": true,//如果需要重新加载的时候请加上这个
				"sPaginationType": "full_numbers",
				"bJQueryUI": true,
				"bAutoWidth": true,//自动宽度
				"bSort": false, //排序功能
				"sDom": '<"">t<"F"ip>',
            "sAjaxSource": "${ctx}/api/product/getProductPageList", //ajax调用接口
				"aoColumnDefs": [{sDefaultContent: '',aTargets: [ '_all' ]}],
	       		"aoColumns": [
	       			{ "sTitle" : "<input type='checkbox' onclick='selectAllOrdisAll();' id='titleId'/>","mData": "id" ,"class":"sClass","mRender":function(data, type, full){
				  		return "<input type='checkbox' name='ids' value='"+full.id+"' id='id'/>";
        				}
				  	},
		                { "sTitle" : "来源","mData": "productForm","class":"sClass","mRender":function(data, type, full){
		                	var text;
	                    	if(full.productForm=='1'){
	                    		text="<font color='blue'>平台</font>";
	                    	}else if(full.productForm=='2'){
	                    		text="<font color='green'>代理商</font>";
	                    	}else {
	                    		text="<font color='red'>无来源</font>";
	                    	}
	                    	return text;
	        				}
		                },
		                { "sTitle" : "供应商","mData": "supplierName","class":"sClass" },
		                { "sTitle" : "商品名称","mData": "productName","class":"sClass" },
		                { "sTitle" : "商品条码","mData": "barCode","class":"sClass" },
		                { "sTitle" : "商品分类","mData": "productClassifyName","class":"sClass" },
		                { "sTitle" : "商品数量","mData": "productCount","class":"sClass" },
		                { "sTitle" : "销量","mData": "productOrderNum","class":"sClass" },
		                { "sTitle" : "参考价","mData": "referencePrice","class":"sClass"},
		                { "sTitle" : "零售价","mData": "retailPrice","class":"sClass" },
		                { "sTitle" : "进货价","mData": "purchasePrice","class":"sClass" },
		                { "sTitle" : "结算价","mData": "settlementPrice","class":"sClass" },
		                { "sTitle" : "促销价","mData": "promotionPrice","class":"sClass" },
		                { "sTitle" : "好评率","mData": "","class":"sClass" },
		                { "sTitle" : "审核状态","mData": "auditState","class":"sClass","mRender":function(data, type, full){
		                	var text;
	                    	if(full.auditState=='1'){
	                    		text="<font color='blue'>待审核</font>";
	                    	}else if(full.auditState=='2'){
	                    		text="<font color='red'>未通过</font>";
	                    	}else if(full.auditState=='3'){
	                    		text="<font color='green'>通过</font>";
	                    	}else{
	                    		text="<font color='red'>无审核状态</font>";
	                    	}
	                    	return text;
	        				}
		                },
		                { "sTitle" : "创建人","mData": "createUserName","class":"sClass" },
		                { "sTitle" : "创建时间","mData": "createTime","class":"sClass"   },
		               /*  { "sTitle" : "线上线下状态","mData": "onlineOfflineStatus","class":"sClass","mRender":function(data, type, full){
		                	var text;
	                    	if(full.onlineOfflineStatus=='1'){
	                    		text="<font color='blue'>线上</font>";
	                    	}else {
	                    		text="<font color='green'>线下</font>"
	                    	}
	                    	return text;
	        				}
		                },*/
		                { "sTitle" : "状态","mData": "saleNoSaleStatus","class":"sClass","mRender":function(data, type, full){
		                	var text;
	                    	if(full.saleNoSaleStatus=='1'){
	                    		text="<font color='blue'>上架</font>";
	                    	}else if(full.saleNoSaleStatus=='2'){
	                    		text="<font color='green'>下架</font>";
	                    	}else {
	                    		text="<font color='red'>无状态</font>";
	                    	}
	                    	return text;
	        				}
		                }, 
		                {"sTitle" : "操作","mData" : "id", "mRender" : function ( data, type, full ) {
	                	  var text = '<div class="btn-group" style="text-align:left;"><button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">操作 <span class="caret"></span></button>';
							  text = text+'<ul class="dropdown-menu" role="menu">';
							  if(full.saleNoSaleStatus=='1'){
								  text += '<li class="divider"></li>';
								  text += '<li><a href="#" onclick="onsal(\''+full.id+'\',\''+2+'\');">下架</a> </li>';
							  }
							  text += '<li class="divider"></li>';
							  text += '<li><a href="#" onclick="deleteById(\''+full.id+'\');">删除商品</a> </li>';
							  text += '<li class="divider"></li>';
                            text += '<li><a href="${ctx}/api/product/toUpdateProduct?id=' + full.id + '" >详情</a> </li>';
							  text = text + '</ul></div>';
							  return text;
							} 
		                }
	            ],
		        "oLanguage" : {
		           "sProcessing" : "数据加载中······",
		           "sLengthMenu" : "显示 _MENU_ 条记录",
		           "sZeroRecords" : "没有您要搜索的内容！",
		           "sEmptyTable" : "列表中无数据存在！",
		           "sInfo" : "当前显示 _START_ 到 _END_ 条数据，共 _TOTAL_ 条数据",
		           "sInfoEmpty" : "显示 0 到 0 条记录",
		           "sInfoFiltered" : "数据列表中共  _MAX_ 条记录",
		           "oPaginate" : {
		               "sFirst" : "首页",
		               "sPrevious" : "上一页",
		               "sNext" : "下一页",
		               "sLast" : "末页"
		           }
		        },
		        "fnServerData" : function ( sSource, aoData, fnCallback, oSettings ) {
		        	  var classifyLevelNew = null;
			     	   if(!$("#classify"+classifyLevel).val()){
			     		   if(classifyLevel>1)
			     			  classifyLevelNew = classifyLevel -1;
			     	   }else{
				     		  classifyLevelNew = classifyLevel;
			     	   }
					oSettings.jqXHR = $.ajax( {
						"dataType" 	: 'json',
						"type" 		: "GET",
						"async"     : 'false',
						"url" 		: sSource,
						"data" 		: {
							'pageNum': (aoData[3].value/aoData[4].value)+1,
							'pageSize' :  aoData[4].value,
							'productName'  :  $("#productName").val(),
							'productForm'  :  $("#productForm").val(),
							'productClassifyId'  :  $("#classify"+classifyLevelNew).val(),
							'saleNoSaleStatus': "${saleNoSaleStatus}",
							'supplierId': $("#supplierId").val(),
							'createUser': "${createUser}"
						}, 
						"success"	: fnCallback
					} );
				},
		  });
		classify(0);
		supplier();
   });
   
   //条件查询重新加载数据
   function query() {
 	  tb.fnDraw();
   };
   //上架、下架
   function onsal(id,val){
	   if(confirm("确认下架吗")==true){
  		 $.ajax({
  			 async:false,
             url: "${ctx}/api/product/onsalPhProduct",
       		data:{
       			id:id,
       			saleNoSaleStatus:val
       			},
       		type:"GET",
       		dataType:"json",
       		success:function(data){
       			if(data.code="200"){
       				tb.fnDraw();
       			}else{
       				alert(data.message);
       			}
       		}
  		 });
  		 return;
  	 }else{
  		 return false;
  	 }
   }
 //全选、反选
	var selectAllOrdisAll = function(){
		$("input[name='ids']").each(function(){ 
			if(this.checked){
				$(this).prop("checked", false); 
			}else{ 
				$(this).prop("checked", true); 
			} 
		});
	};
	//获取选择的值 
	var getCheckBoxValue = function(){ 
		var checkBoxValue=[]; 
		$("input[name='ids']:checkbox:checked").each(function(){ 
			checkBoxValue.push($(this).val()); 
		});
		if(checkBoxValue.length>0){
			checkBoxValue = checkBoxValue.toString();
		}
		return checkBoxValue;
	};
  //删除方法
  function deleteById(id){
	   if(confirm("确认删除吗")==true){
		   if(!id){
		   	id = getCheckBoxValue();
		   }
		   if(id.length<=0){
			   alert("请选择操作数据");
			   return false;
		   }else{
		  		 $.ajax({
		  			 async:false,
                     url: "${ctx}/api/product/deletePhProduct",
		       		data:{custorId:id},
		       		type:"GET",
		       		dataType:"json",
		       		success:function(data){
		       			if(data.code="200"){
		       				tb.fnDraw();
		       			}else{
		       				alert(data.message);
		       			}
		       		}
		  		 });
 		 	return;
		   }
 	 }else{
 		 return false;
 	 }
  }
	//加载类别选项
	var classify=function(val){
		var titleVal = "";
		if(classifyLevel == 1){
			$("#selectTypeTwo").html("");
			$("#selectTypeThree").html("");
		}
		if(classifyLevel == 2){
			$("#selectTypeThree").html("");
		}
		if(val >= 1){
			titleVal = $('#classify'+val).attr("title")
			val = $('#classify'+val).val();
		}
			$.ajax({
				async:false,
				type : "GET",
                url: "${ctx}/api/productClassify/getProductClassifyVoAchildList",
				data:{parentId:val,deleteFlag:1},
				success: function(data) {
					if(data.data){
						var lenth = data.data.length;
						if(lenth>0){
							var select ="";
							select +=" <option value='' >请选择</option> ";
							$.each(data.data, function(i, item){ 
								classifyLevel = item.classifyLevel;
								select += " <option title='"+item.classifyLevel+"' value='"+item.id+"'>"+item.classifyName+"</option> "
							});
							var selectStart =" <select title='"+classifyLevel+"' class='form-control' id='classify"+classifyLevel+"'  style='width:200px;' onchange='classify("+classifyLevel+");'>";
							selectStart += select ;
							selectStart += " </select> ";
							if(classifyLevel == 1){
								$("#selectTypeTwo").html("");
								$("#selectTypeThree").html("");
								$("#selectType").html(selectStart);
							}
							if(classifyLevel == 2){
								$("#selectTypeThree").html("");
								$("#selectTypeTwo").html(selectStart);
							}
							if(classifyLevel == 3){
								$("#selectTypeThree").html(selectStart);
							}
						}else{
							if(titleVal == 1){
								$("#selectTypeTwo").html("");
								$("#selectTypeThree").html("");
							}
							if(titleVal == 2){
								$("#selectTypeThree").html("");
								if(!val){
									$("#selectTypeTwo").html("");
								}
							}
							if(titleVal == 3){
								if(!val){
									$("#selectTypeThree").html("");
								}
							}
						}
					}else{
						if(titleVal == 1){
							$("#selectTypeTwo").html("");
							$("#selectTypeThree").html("");
						}
						if(titleVal == 2){
							classifyLevel = titleVal-1;
							$("#selectTypeThree").html("");
							if(!val){
								$("#selectTypeTwo").html("");
							}
						}
						if(titleVal == 3){
							classifyLevel = titleVal-1;
							if(!val){
								$("#selectTypeThree").html("");
							}
						}
					}
				}
			});
};
//加载类别选项
var supplier=function(){
		$.ajax({
			async:false,
			type : "GET",
            url: "${ctx}/api/supplier/list",
			success: function(data) {
				if(data.data){
						var select =" <select  class='form-control' id='supplierId'  style='width:200px;'> <option value='' >请选择</option>";
						$.each(data.data, function(i, item){ 
							select += " <option  value='"+item.id+"'>"+item.supplierName+"</option> "
						});
						$("#supplierType").append(select);
				}else{
				}
			}
		});
};
</script>
</body>
</html>